<template>
  <!-- 企业认证 -->
  <view id="container">
    <view class="banner">
      <u-steps class="steps" :list="numList" :current="1" un-active-color="#FFFFFF"></u-steps>
    </view>
    <view class="content">
      <!-- 昵称 -->
      <view class="choose-type">
        <view class="name">认证昵称</view>
        <input type="text" placeholder="填写企业名称" v-model="E_name" placeholder-style="{color: #9C9C9C; font-size: 18rpx; font-weight: normal;}" />
      </view>

      <!-- 信用代码 -->
      <view class="choose-type">
        <view class="credit-code">信用代码</view>
        <input type="text" value="" v-model="E_code" placeholder="请输入统一社会信用代码" placeholder-style="{color: #9C9C9C; font-size: 18rpx; font-weight: normal;}" />
      </view>
      <!-- 营业执照 -->
      <view class="choose-type">
        <view class="credit-code" style="width: 210rpx">营业执照</view>
        <view class="upload">
          <image :src="E_img || 'https://i.loli.net/2021/09/02/S28uRzEAoxmKOTg.png'" class="img" @click="choose_and_upload_img(1)"></image>
          <view class="txt" v-if="!E_img">请上传营业执照</view>
        </view>
      </view>
      <!-- 手机号码 -->
      <view class="choose-type">
        <view class="phone-num">联系电话</view>
        <view class="phone-item">
          <input class="phone-n" type="number" v-model="E_phone" placeholder="请输入手机号码" placeholder-style="{color: #9C9C9C; font-size: 18rpx; font-weight: normal;}" />
          <view class="yzm-item">
            <input class="yzm" type="number" v-model="E_verify" placeholder="输入验证码" placeholder-style="{color: #9C9C9C; font-size: 18rpx; font-weight: normal;}" />
            <button class="btn" type="default" size="mini" @click="get_verify_code">{{ button_tips }}</button>
            <!-- 验证码组件 就一个独立的按钮 -->
            <view class="wrap">
              <u-toast ref="uToast"></u-toast>
              <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" @end="verify_end" change-text="x秒后获取" :end-text="end_txt" start-text="获取验证码"> </u-verification-code>
            </view>
            <!-- 验证码组件 -->
          </view>
        </view>
      </view>
      <!-- 法人身份证 -->
      <view class="choose-item">
        <view class="credit-code">上传法人身份证</view>
        <view class="upload-password">
          <view class="password-item">
            <image :src="E_face || 'https://i.loli.net/2021/09/02/Hq3Ne6LIzAXt9B4.jpg'" class="icon" @click="choose_and_upload_img(2)"></image>
            <view class="upload-item" v-if="!E_face">上传人像面</view>
          </view>
          <view class="password-item">
            <image :src="E_back || 'https://i.loli.net/2021/09/02/XKcODqrTVHjvBnI.jpg'" class="icon" @click="choose_and_upload_img(3)"></image>
            <view class="upload-item" v-if="!E_back">上传国徽面</view>
          </view>
        </view>
      </view>
    </view>
    <view class="submit" @click="submit">提交</view>
  </view>
</template>

<script>
var wx = require('jweixin-module')
export default {
  data() {
    return {
      button_tips: '获取验证码',
      end_txt: '',
      seconds: 60,
      current: 0,
      numList: [
        {
          name: '信息填写'
        },
        {
          name: '审核中...'
        },
        {
          name: '认证通过'
        }
      ],
      E_name: '',
      E_img: '',
      E_code: '',
      E_phone: '',
      E_face: '',
      E_back: '',
      E_verify: ''
    }
  },
	onLoad(option) {
		if(option.id) {
			this.getInfo();
		}
	},
  methods: {
    // 配置微信分享
    __wx_config() {
      ;(async () => {
        let url = window.location.href.split('#')[0]
        let res_ticket = await this.$u.api.get_share_ticket({
          current_url: url
        })
        let ticket = res_ticket.data

        let cfg_data = {
          debug: false,
          appId: ticket.appId,
          timestamp: ticket.timestamp,
          nonceStr: ticket.nonceStr,
          signature: ticket.signature,
          jsApiList: ['chooseWXPay']
        }
        wx.config(cfg_data)
      })()
    },
    // 提交
    submit() {
      // 必填项目检查
      if (false == this.must_check()) {
        return
      }
      this.$u.api
        .update_authinfo({
          type: 1,
          firm: this.E_name,
          mobile: this.E_phone,
          code: this.E_verify,
          credit: this.E_code,
          business: this.E_img_upload,
          identity: this.E_face_upload + ',' + this.E_back_upload
        })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '你的认证已提交，请耐心等待审核',
              icon: 'none'
            })
						setTimeout(() => {
							uni.navigateBack({
							   delta: 1
							});
						}, 500)
            // this.wechat_pay()
          }else{
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
    },
    // 用户支付
    wechat_pay() {
      this.$u.api.level_buy().then((res) => {
        if (res.code == 200) {
          let cfg = res.data
          wx.chooseWXPay({
            timestamp: cfg.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: cfg.nonceStr, // 支付签名随机串，不长于 32 位
            package: cfg.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: cfg.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
            paySign: cfg.paySign, // 支付签名
            success: function (res) {
              // 支付成功后的回调函数
            }
          })
        }
      })
    },
    // 获取验证码
    get_verify_code() {
			if(this.button_tips === '获取验证码') {
				let self = this
				this.$u.api.get_phone_verify_code({
					mobile: this.E_phone
				}).then((res) => {
					if (res.code == 200) {
						self.$u.toast(res.msg)
						self.$refs.uCode.start()
					} else {
						self.$u.toast(res.msg)
					}
				})
			} else {
				this.$u.toast('请稍后')
			}
    },
    // 组件的函数
    codeChange(text) {
      this.button_tips = text
    },
    // 计时结束时出发
    verify_end() {
      this.$refs.uCode.reset()
      this.button_tips = '验证通过'
    },
    // 必填项检查
    must_check() {
      let hint = ['认证名称必填', '信用代码必填', '还没有上传营业执照', '请输入手机号码', '请上传身份证正面照片', '请上传身份证背面照片']
      let arr = [this.E_name, this.E_code, this.E_img, this.E_phone, this.E_face, this.E_back]
      for (var i = 0; i < 6; i++) {
        if (arr[i] == '') {
          uni.showToast({
            title: hint[i],
            icon: 'none'
          })
          return false
        }
      }
      return true
    },
    //失去焦点时，验证手机验证码
    // verify_vericode() {
    //   let self = this
    //   this.$u.api
    //     .verify_vericode({
    //       mobile: this.E_phone,
    //       code: this.E_verify
    //     })
    //     .then((res) => {
    //       if (res.code == 200) {
    //         uni.showToast({
    //           title: '验证通过',
    //           icon: 'none'
    //         })
    //         self.end_txt = '验证通过'
    //         this.$refs.uCode.reset()
    //         this.button_tips = '验证通过'
    //       } else {
    //         uni.showToast({
    //           title: '验证错误，请仔细核对验证码',
    //           icon: 'none'
    //         })
    //         self.end_txt = '请重新输入'
    //         this.$refs.uCode.reset()
    //         this.button_tips = '重新填写'
    //       }
    //     })
    // },
    // 上传图片
    choose_and_upload_img(type) {
      let that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: function (res) {
          let local_path = res.tempFilePaths[0]
          ;(async () => {
            //图片转bs64 向服务器换取图片的url
            let bs64 = await that.$u.utils.auth_img2base64(local_path, 0)
            that.$u.api
              .upload_base64({
                chars: bs64,
                check: 0
              })
              .then((res) => {
                if (res.code != 200) {
                  that.$refs.uToast.show({
                    title: res.msg,
                    type: 'error'
                  })
                } else {
                  switch (type) {
                    case 1:
                      that.E_img = that.vuex_api_HEADER + res.data.path
                      that.E_img_upload = that.vuex_api_HEADER + res.data.path
                      break
                    case 2:
                      that.E_face = that.vuex_api_HEADER + res.data.path
                      that.E_face_upload = that.vuex_api_HEADER + res.data.path
                      break
                    case 3:
                      that.E_back = that.vuex_api_HEADER + res.data.path
                      that.E_back_upload = that.vuex_api_HEADER + res.data.path
                      break
                  }
                }
              })
          })()
        }
      })
    },
		// 获取认证信息
		getInfo() {
			this.$u.api.get_authinfo().then(res => {
				if(res.code === 200 ) {
					this.E_name = res.data.firm;
					this.E_phone = res.data.mobile;
					this.E_code = res.data.credit;
					this.E_img_upload = res.data.business;
					this.E_face_upload = res.data.identity[0];
					this.E_back_upload = res.data.identity[1];
					this.E_img = res.data.business;
					this.E_face = res.data.identity[0];
					this.E_back = res.data.identity[1];
				}
			})
		}
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

#container {
  .banner {
    width: 750rpx;
    height: 400rpx;
    background: linear-gradient(90deg, #66cee7 0%, #6ae4e9 100%);
    padding-top: 50rpx;
  }

  .content {
    width: 687rpx;
    background-color: #fff;
    border-radius: 10rpx;
    position: relative;
    top: -181rpx;
    margin: 0 auto;
    font-weight: 700;
    padding: 10rpx 23rpx;

    .choose-type {
      display: flex;
      border-bottom: 1px solid #e9e9e9;
      padding: 38rpx 0;

      .name {
        padding-right: 63rpx;
      }

      .upload {
        position: relative;
        width: 340rpx;
        height: 160rpx;

        .img {
          width: 340rpx;
          height: 160rpx;
        }

        .txt {
          font-size: 16rpx;
          color: #5874cf;
          position: absolute;
          left: 50%;
          bottom: 19rpx;
          transform: translateX(-50%);
        }
      }

      .credit-code {
        padding-right: 63rpx;
      }

      .phone-num {
        padding-right: 63rpx;
      }

      .phone-item {
        .phone-n {
          width: 400rpx;
          height: 45rpx;
          background-color: #f3f7fa;
          margin-bottom: 18rpx;
          padding-left: 10rpx;
        }

        .yzm-item {
          display: flex;

          .yzm {
            width: 253rpx;
            height: 45rpx;
            background-color: #f3f7fa;
            padding-left: 10rpx;
          }

          .btn {
            width: 133rpx;
            background-color: #ffb400;
            font-size: 20rpx;
            padding: 0 5rpx;
            color: #fff;
          }
        }
      }

      .choose {
        padding-left: 38rpx;

        radio-group {
          display: flex;

          .uni-list-cell {
            display: flex;
            padding-right: 54rpx;
          }
        }
      }
    }

    .choose-item {
      padding: 38rpx 0;

      .upload-password {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 37rpx;

        .password-item {
          width: 280rpx;
          height: 230rpx;
          position: relative;

          .upload-item {
            position: absolute;
            bottom: 10rpx;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20rpx;
            color: #fff;
          }

          .icon {
            width: 280rpx;
            height: 230rpx;
            border-radius: 10rpx;
          }
        }
      }
    }
  }

  .submit {
    width: 536rpx;
    height: 79rpx;
    line-height: 79rpx;
    font-size: 38rpx;
    color: #fff;
    background-color: #3ac7e5;
    border-radius: 39rpx;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: -126rpx;
  }
}
</style>
